<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2023-01-08 22:49:10
 * @LastEditors: peng.chen2
 * @LastEditTime: 2024-06-13 15:43:01
 * @FilePath: /person/vue3-h5/src/views/Home.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" class="img-logo">
    <div class="title text-center txtover">{{cp}}: {{get_demo}}</div>
    <HelloWorld :msg="1"/>
    <Button type="success" @click="goAboutHandle">vant 按钮</Button>

    <Button class="text-gray-900" type="success" @click="changeVuexHandle">vuex 按钮</Button>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, computed  } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import { Button } from 'vant';
import useCurrentInstance from '@/hooks/useCurrentInstance'
import { useStore } from 'vuex'
const store = useStore()
const {globalProperties} = useCurrentInstance()
const cp = ref<string>('我是首页')
const logo_W = ref<string>('100px')
const get_demo = computed(()=> store.getters.get_demo)
onMounted(() => {
  globalProperties.axios.post("/login").then((response:any) => {
    console.log(response, 'response')
  })
})

const goAboutHandle = () => {
  globalProperties.$router.push('/about')
}

const changeVuexHandle = () => {
  store.commit('mutations_demo', 'commit')
  setTimeout(() => {
    store.dispatch('action_Demo', 'action22')
  }, 2000);
}
</script>
<style lang="less" scoped >
.title{
  font-size: 20px;
  transform: rotateX(10deg);

}
.img-logo{
  width: v-bind(logo_W)
}
</style>

